<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <title>Document</title>
    <style>
        input { font-size:50px ;}
    </style>
</head>
<body>
    <h1>
        父 -- num=5
        子 -- 文本框=num  [+] 父num++
    </h1>
    <div id="app">
         <shownum @myadd="test" :num="num"></shownum>
    </div>
</body>
<script>
//子
Vue.component('shownum',{
    props:['num'],
    template:`
    <div>
        <h1>子组件</h1>
        <input type="text" :value="num" /><br/>
        <button @click="handle"> + </button>
    </div>
    `,
    methods:{
        handle(){
            this.num++   //不能改，props单向的
           //this.$emit('myadd')
        }
    }
});

// 父
var vm = new Vue({
    el: "#app",
    data: {
        num: 9
    },
    methods:{
       test(){
          this.num++
       } 
    }
});
</script>
</html>